<template>
  <div class="app-container">

    <el-table v-loading="loading" :data="dataList" :header-cell-style="{background:'#F8F8F9'}" border>
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column
        type="index"
        label="序号"
        width="70"
      />
      <el-table-column label="系统模块" align="center" prop="title" />
      <el-table-column label="操作类型" align="center" prop="businessType" />
      <el-table-column label="请求方式" align="center" prop="requestMethod" />
      <el-table-column label="操作账号" align="center" prop="operName" />
      <el-table-column label="操作IP" align="center" prop="operIp" />
      <el-table-column label="操作状态" align="center" prop="status">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" type="success">成功</el-tag>
          <el-tag v-if="scope.row.status == 1" type="danger">失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="调用方法" align="center" prop="method" />
      <el-table-column label="请求URL" align="center" prop="operUrl" />
      <el-table-column label="请求参数" align="center" prop="operParam" />
      <el-table-column label="返回结果" align="center" prop="jsonResult" />

      <el-table-column label="创建时间" align="center" prop="operTime" />

    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      v-if="total > 0"
      :total="total"
      :current-page.sync="queryParams.current"
      :page-size.sync="queryParams.pageSize"
      :page-sizes="[1,2, 10, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      style="padding: 30px 0; text-align: center;"
      @current-change="getList(queryParams.current)"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import api from '@/api/log/operationLog/index'

export default {
  name: 'OperationLog',
  data() {
    return {
      loading: true,
      dataList: [], // 表格数据
      equipment: {}, // 设备对象
      total: 0, // 总记录数
      queryParams: {
        current: 1, // 页码
        pageSize: 20 // 每页记录数
      },
      // 多选
      multipleSelection: []
    }
  },
  beforeMount() {
    this.getList()
  },
  methods: {
    /**
     * 每页大小发生变化的回调
     *
     * @param pageSize
     */
    handleSizeChange(size) {
      console.log(this.queryParams.pageSize)
      this.queryParams.pageSize = size
      this.getList()
    },

    async getList(pageNum = 1) {
      try {
        this.queryParams.current = pageNum
        const res = await api.listOperationLogByPage(this.queryParams)
        this.dataList = res.data.records
        this.total = res.data.total
        this.queryParams.current = res.data.current
        this.queryParams.pageSize = res.data.size
      } catch (e) {
        this.$message.error(e.message)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>

</style>

